<template>
  <div>
    <div>原值：{{ count }}</div>
    <div>双倍值：{{ double }}</div>
    <div>三倍值：{{ tri }}</div>
    <button @click="addCount">增加1</button>
    <button @click="stopCount">停止</button>
  </div>
</template>
<script lang="ts" setup>
import {
  computed,
  effectScope,
  onScopeDispose,
  type Ref,
  ref,
} from "vue";
const scope = effectScope(true);
const count = ref(0);
let double: Ref<number>;
let tri: Ref<number>;
// const double = computed(() => count.value * 2);
// const tri = computed(() => count.value * 3);
scope.run(() => {
  double = computed(() => count.value * 2);
  const subScope = effectScope();
  subScope.run(() => {
    tri = computed(() => count.value * 3);
  });
  onScopeDispose(() => {
    console.log(1111);
  });
});
const addCount = () => {
  count.value += 1;
};
const stopCount = () => {
  scope.stop();
  count.value += 1;
};
</script>
